<template>
    <div class="right">
        <div v-if="rightData.id" class="h100">
            <div class="content" :style="{ height: rightData.copywriting ? 'calc(100% - 51px)' : '100%' }">
                <div class="box h100 overflow-auto">
                    <div class="box-icon d-flex ai-center mb-30">
                        <img :src="rightData.icon_before" alt="" class="w100 h100">
                        <img :src="rightData.icon_after" alt="" class="w100 h100 ml-20">
                    </div>
                    <div class="fs-18 fw-500 lh-18">{{ rightData.name }}</div>
                    <div class="fs-16 fw-500 lh-16 mt-12 auxiliary-color">{{ rightData.detail }}</div>
                    <div class="fs-18 fw-500 lh-18 mt-30">权益规则</div>
                    <div class="mt-20">
                        <div v-html="rightData.content"></div>
                    </div>
                </div>
            </div>
            <div v-if="rightData.copywriting" class="btn-copywriting">
                {{ rightData.copywriting }}
            </div>
        </div>
        <div v-else class="h100 d-flex ai-center jc-center">
            <no-data></no-data>
        </div>
    </div>
</template>
<script setup>
defineProps({
    rightData: {
        type: Object,
        required: true,
        default: () => ({ id: null })
    }
})
</script>

<style lang="scss" scoped>
.right {
    background-color: #fff;
    border-radius: 5px;
    height: 100%;
    color: $main-color;
    .content {
        padding: 30px;
        padding-bottom: 15px;
        box-sizing: border-box;
        .box {
            overflow-y: auto;
            &-icon {
                width: 80px;
                height: 80px;
            }
        }
    }
    .btn-copywriting {
        width: 100%;
        height: 51px;
        line-height: 51px;
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        background: #F0F6FE;
        border-radius: 5px;
    }
}
</style>